<template>
  <el-dialog title="预览" :visible.sync="playIsDialog_c" @close="resetForm('formName')" width="800px">
    <el-form ref="formName" label-width="120px" class="demo-ruleForm">
      <div class="hello-ezuikit-js">
        <div id="video-container" :style="{'width': boxWidth}"></div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm('formName')">取 消</el-button>
    </div>
  </el-dialog>

</template>

<script>
import axios from 'axios'
// 请先查看package.json是否有"ezuikit-js": "^0.5.2", 没有请复制"ezuikit-js": "^0.5.2",到dependencies下，npm install 重新安装依赖 或者 npm install ezuikit-js
import EZUIKit from 'ezuikit-js'
var player = null // 播放器注册
export default {
  name: 'ezuikit',
  props: {
    msg: String,
    appKey: {
      type: String,
      default: ''
    },
    appSecret: {
      type: String,
      default: ''
    },
    playIsDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cuIndex: 0,
      playIsDialog_c: false, // 弹窗是否显示
      rules: {},

      boxWidth: '100%',
      boxHeight: '100%'
    }
  },
  watch: {
    playIsDialog(val) {
      console.log(val)
      this.playIsDialog_c = val
      if (this.playIsDialog_c) {
        this.getDeviceToken()
      }
    }
  },
  mounted() {},

  methods: {
    // 获取token
    getDeviceToken() {
      const data = new FormData()
      data.append('appKey', this.appKey)
      data.append('appSecret', this.appSecret)
      axios({
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        method: 'post',
        url: 'https://open.ys7.com/api/lapp/token/get',
        data: data
      })
        .then((res) => {
          console.log(res)
          if (res.data.code == '200') {
            this.accessToken = res.data.data.accessToken
            this.StructureEZUIKitPlayer()
          }
        })
        .catch((err) => {
          console.log(res)
        })
    },

    StructureEZUIKitPlayer() {
      console.log(222)
      // 渲染视频播放
      player = new EZUIKit.EZUIKitPlayer({
        id: 'video-container', // 视频容器ID
        accessToken: this.accessToken,
        url: 'ezopen://open.ys7.com/D54281872/1.cloud.rec', // 初始化写死一个离线或者找不到的设备，避免初始化无法创建播放器；
        template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
        // plugin: ['talk'],
        header: ['capturePicture', 'save'], // 如果templete参数不为simple,该字段将被覆盖                     // 加载插件，talk-对讲
        footer: ['hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
        width: this.width ? this.width : this.boxWidth,
        height: this.height ? this.height : this.boxHeight,
        fullScreenCallBack: (data) => console.log('全屏回调', data) // 如果template参数不为simple, 无法获取
      })
    },

    change() {
      player.stop()
      // 切换为直播
      // player.play({
      //   url:"ezopen://open.ys7.com/244640009/1.live"
      // })

      // setTimeout(()=>{
      //   player.play({
      //     url:"ezopen://open.ys7.com/244640009/1.live"
      //   })
      // },1000)
    }
  },
  // 取消
  resetForm(formName) {
    // 停止播放

    this.$refs[formName].resetFields()
    this.$parent.closePlay()
  },
  beforeDestroy() {
    player.stop()
  }
}
</script>

<style lang="less" scoped>
.demo-ruleForm {
  width: 95%;
  margin: 0 auto;
  padding-top: 10px;

  .el-input-number {
    width: 100%;
  }
}
</style>
